<script lang="ts" setup>
import MenuItem from './MenuItem.vue'

defineProps({
  menus: {
    type: Array<{ id: number; title: string; icon?: string; children?: [] }>,
    default: () => [],
  },
})
</script>

<template>
  <template v-for="m in menus" :key="m.id">
    <el-sub-menu v-if="m.children && m.children.length > 0" :index="m.id.toString()">
      <template #title>
        <el-icon v-if="m.icon">
          <component :is="m.icon" />
        </el-icon>
        <span>{{ m.title }}</span>
      </template>
      <MenuItem :menus="m.children" />
    </el-sub-menu>

    <el-menu-item v-else :index="m.id.toString()">
      <el-icon v-if="m.icon">
        <component :is="m.icon" />
      </el-icon>
      <span>{{ m.title }}</span>
    </el-menu-item>
  </template>
</template>
